<template>
  <div>
    <div class="head"  @click="gosee">
      <div class="h_l">
        <img src="@/assets/img/sd/photo.png" alt="" />
        <div class="name">
          <div class="n1">
            <span v-if="phaseInfo.breedStageInfoModel && phaseInfo.breedStageInfoModel.cultureArea">{{ phaseInfo.breedStageInfoModel.cultureArea }}</span>
            <div v-if="phaseInfo.breedStageInfoModel && phaseInfo.breedStageInfoModel.physiologyStageShow">{{ phaseInfo.breedStageInfoModel.physiologyStageShow }}</div>
          </div>
          <div class="n2" v-if="phaseInfo.individualInfoCount">羊只数量：{{ phaseInfo.individualInfoCount }}</div>
        </div>
      </div>
      <van-icon name="arrow" />
    </div>
    <van-tabs v-if="phaseInfo.breedOperationList" v-model="active" sticky color="#37B5B5" title-inactive-color="#999999" title-active-color="#333333">
      <van-tab  :title="item.name" v-for="(item, index) in phaseInfo.breedOperationList" :key="index">
        <div class="content">
          <div class="content1">
            <span>{{ item.name }}</span>
            <div @click="goRecord(item)">操作记录</div>
          </div>
          <div class="info">
            {{ item.details }}
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Icon, Tab, Tabs } from 'vant'
import { getValue, setValue, clearValue } from '@/utils/auth'

import { queryBreedOperationList, breedStandard } from '@/api/record.js'
export default {
  components: {
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      active: 0,
      phaseInfo: {}, // 阶段信息
      // recordKeyList:  ], // 操作记录key列表
      houseInfoId: null
    }
  },

  created() {
    this.houseInfoId = getValue('fzmHourseId')
    this.breedStageInfoId = getValue('fzmBreedStageInfoId')

    console.log(this.breedStageInfoId)
    this.loadPhaseInfo()
  },
  methods: {
    // 加载阶段信息
    loadPhaseInfo() {
      const params = {
        houseInfoId: this.houseInfoId,
        breedStageInfoId: this.breedStageInfoId
      }
      queryBreedOperationList(params).then(res => {
        if (res.status === 0) {
          console.log(res)
          this.phaseInfo = res.data
        }
      })
    },
    // 去对应记录列表，值为NSY_OPERATION_RECORD_NONE去其他
    goRecord({ operationRecordCode, name, details }) {
      // NSY_OPERATION_RECORD_FEED 饲喂记录
      // NSY_OPERATION_RECORD_GROW 生长记录
      // NSY_OPERATION_RECORD_YU_CHENG_VACCINATION 疫苗接种记录
      // NSY_OPERATION_RECORD_BREED 配种记录
      // NSY_OPERATION_RECORD_PREGNANCY 受孕确认记录
      // NSY_OPERATION_RECORD_LAMBING 产羔记录
      // NSY_OPERATION_RECORD_SEMEN 采精记录
      // NSY_OPERATION_RECORD_MILK 产奶记录
      // NSY_OPERATION_RECORD_DISINFECTION 消毒记录
      // NSY_OPERATION_RECORD_NONE 无
      var url = null
      debugger
      switch (operationRecordCode) {
        case 'T000010_NSY_OPERATION_RECORD_FEED':
          url = 'feedingRecords'
          break
        case 'T000010_NSY_OPERATION_RECORD_GROW':
          url = 'growthRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_YU_CHENG_VACCINATION':
          url = 'vaccinesRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_BREED':
          url = 'breedingRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_PREGNANCY':
          url = 'pregnancyConfirmationRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_LAMBING':
          url = 'lambingRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_SEMEN':
          url = 'ejaculationsRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_MILK':
          url = 'milkRecordManagement'
          break
        case 'T000010_NSY_OPERATION_RECORD_DISINFECTION':
          url = 'disinfectionRecord'
          break
        case 'T000010_NSY_OPERATION_RECORD_NONE':
          url = 'addOtherRecords'
          break
      }
      // 等于其他记录传值
      if (url === 'addOtherRecords') {
        const fzmOtherInfo = {
          content: details,
          operation: name,
          otherNum: this.phaseInfo.individualInfoCount
        }
        console.log(fzmOtherInfo)
        clearValue('otherObj')
        clearValue('earTag2')

        setValue('fzmOtherInfo', JSON.stringify(fzmOtherInfo))
      }
      this.$bridge.call(url)
    },
    gosee() {
      this.$bridge.call('sheepSeeQy')
    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  width: 100%;
  height: 80px;
  background: #ffffff;
  border-bottom: 1px solid #f0f1f3;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .h_l {
    display: flex;
    img {
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }
    .name {
      .n1 {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        span {
          color: #333333;
          font-size: 15px;
          margin-right: 10px;
        }
        div {
          padding: 2px 6px;
          border-radius: 2px;
          font-size: 12px;
          color: #37b5b5;
          background: rgba(55, 181, 181, 0.2);
        }
      }
      .n2 {
        font-size: 13px;
        color: #666666;
      }
    }
  }
}
.content {
  padding: 15px;
  .content1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
    span {
      font-size: 16px;
      color: #333333;
    }
    div {
      width: 70px;
      height: 24px;
      background: #37b5b5;
      border-radius: 2px;
      text-align: center;
      line-height: 24px;
      text-align: center;
      font-size: 13px;
      color: #ffffff;
    }
  }
  .info {
    text-align: justify;
    color: #666666;
    line-height: 24px;
  }
}
</style>
